<template>
  <div class="card-content">
    <div class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd">
      <div class="column is-2">

        <tree :data="deptList" :expand-on-click-node="false" showSearch></tree>
      </div>
      <div class="column is-10">
        <b-table :data="tableDataSimple" paginated :per-page="perPage" :current-page.sync="currentPage" pagination-rounded>

          <b-table-column label="ID" width="40" numeric v-slot="props">
            {{ props.row.id }}
          </b-table-column>

          <b-table-column label="First Name" v-slot="props">
            {{ props.row.first_name }}
          </b-table-column>

          <b-table-column label="Last Name" v-slot="props">
            {{ props.row.last_name }}
          </b-table-column>

          <b-table-column label="Date" centered v-slot="props">
            {{ new Date(props.row.date).toLocaleDateString() }}
          </b-table-column>

          <b-table-column label="Gender" v-slot="props">
            {{ props.row.gender }}
          </b-table-column>


          <template #footer>
            <div class="has-text-right">
              35人
            </div>
          </template>
        </b-table>
      </div>
    </div>
  </div>
</template>
<script>
import { treeDept } from '@/api/dept'
import Tree from '@/components/Tree'
export default {
  components: {
    Tree
  },
  props: [''],
  data(){
    return {
      currentPage: 1,
      perPage: 5,
      deptList:[],
      tableDataSimple :[
        { 'id': 1, 'first_name': 'Jesse', 'last_name': 'Simmons', 'date': '2016/10/15 13:43:27', 'gender': 'Male' },
        { 'id': 2, 'first_name': 'John', 'last_name': 'Jacobs', 'date': '2016/12/15 06:00:53', 'gender': 'Male' },
        { 'id': 3, 'first_name': 'Tina', 'last_name': 'Gilbert', 'date': '2016/04/26 06:26:28', 'gender': 'Female' },
        { 'id': 4, 'first_name': 'Clarence', 'last_name': 'Flores', 'date': '2016/04/10 10:28:46', 'gender': 'Male' },
        { 'id': 5, 'first_name': 'Anne', 'last_name': 'Lee', 'date': '2016/12/06 14:38:38', 'gender': 'Female' },
        { 'id': 2, 'first_name': 'Jesse', 'last_name': 'Simmons', 'date': '2016/10/15 13:43:27', 'gender': 'Male' },
        { 'id': 2, 'first_name': 'John', 'last_name': 'Jacobs', 'date': '2016/12/15 06:00:53', 'gender': 'Male' },
        { 'id': 3, 'first_name': 'Tina', 'last_name': 'Gilbert', 'date': '2016/04/26 06:26:28', 'gender': 'Female' },
        { 'id': 4, 'first_name': 'Clarence', 'last_name': 'Flores', 'date': '2016/04/10 10:28:46', 'gender': 'Male' },
        { 'id': 5, 'first_name': 'Anne', 'last_name': 'Lee', 'date': '2016/12/06 14:38:38', 'gender': 'Female' },
        { 'id': 3, 'first_name': 'Jesse', 'last_name': 'Simmons', 'date': '2016/10/15 13:43:27', 'gender': 'Male' },
        { 'id': 2, 'first_name': 'John', 'last_name': 'Jacobs', 'date': '2016/12/15 06:00:53', 'gender': 'Male' },
        { 'id': 3, 'first_name': 'Tina', 'last_name': 'Gilbert', 'date': '2016/04/26 06:26:28', 'gender': 'Female' },
        { 'id': 4, 'first_name': 'Clarence', 'last_name': 'Flores', 'date': '2016/04/10 10:28:46', 'gender': 'Male' },
        { 'id': 5, 'first_name': 'Anne', 'last_name': 'Lee', 'date': '2016/12/06 14:38:38', 'gender': 'Female' },
      ]
    }
  },
  created(){
    this.getDept()
  },
  methods: {
   async getDept(){
      const { data } = await treeDept()
     this.deptList=data
    }
  },
}

</script>
<style scoped>

</style>
